import React, { Component } from 'react'
import { Card,Form, Input, Button,Upload, message  } from 'antd'
import { UploadOutlined } from '@ant-design/icons';
import { addArt } from 'api'
import E from 'wangeditor'
export default class ArtAdd extends Component {
  constructor(){
    super();
    this.state = {
      thumb:'',
      editor:null
    }
  }
  render() {
    const layout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
    };
    const tailLayout = {
      wrapperCol: { offset: 4, span: 20 },
    };
    const _this = this;
    const props = {
      name: 'thumb', // 上传的文件 字段名
      action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',//接口地址
      headers: { // 头部的token
        authorization: 'authorization-text',
      },
      onChange(info) {
        if (info.file.status !== 'uploading') {
         // console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} 上传成功`);
          const url = info.file.response.url
          _this.setState({
            thumb: url
          })
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} 上传失败`);
        }
      },
    };
    return (
      <Card title="增加文章">
       <Form
            style={{maxWidth:800}}
             {...layout}
             name="basic"
             onFinish={this.submitForm}
           >
             <Form.Item
               label="标题"
               name="title"
               rules={[
                 { required: true, message: '这个必须要写哦，不要搞事情!' }
                 ]}
             >
               <Input />
             </Form.Item>
             <Form.Item
               label="作者"
               name="author"
               rules={[
                 { required: true, message: '这个必须要写哦，不要搞事情!' }
                 ]}
             >
               <Input />
             </Form.Item>
             <Form.Item
               label="上传文章封面"
             >
                 <Upload {...props}>
                   <Button icon={<UploadOutlined />}>Click to Upload</Button>
                 </Upload>,
             </Form.Item>
             <Form.Item
               label="描述"
               name="desc"
             >
               <Input.TextArea  />
             </Form.Item>
            <Form.Item
              label="内容"
            >
             <div id="editor"/>
            </Form.Item>
             <Form.Item {...tailLayout}>
               <Button type="primary" htmlType="submit">
                 提交
               </Button>
             </Form.Item>
           </Form>
      </Card>
    )
  }
  componentDidMount(){
    this.initEditor()
  }
  initEditor = ()=>{
    const editor = new E('#editor')
      // 或者 const editor = new E(document.getElementById('div1'))
     editor.create()
     this.setState({
       editor
     })
  }
  submitForm = (params)=>{
    // 提交表单
   
   params = {
     ...params,
     thumb: this.state.thumb,
     content: this.state.editor.txt.html()
   }
   console.log(this.state.editor.txt.html())
   addArt(params).then(res=>{
     if(res.data.code === 200){
       message.success(res.data.msg,2,()=>{
         this.props.history.go(0)
       })
       
     }
   }) 
  }
}
